<template>
	<div>
		<el-button @click="clearFilter">重置表格</el-button>
		<el-table
			ref="filterTable"
			:data="tableData"
			@sort-change="onSortChange"
			@filter-change="onFilterChange"
			:default-sort="{ prop: 'date', order: 'descending' }"
			style="width: 100%"
		>
			<el-table-column type="selection" :selectable="selectableHandle"></el-table-column>
			<el-table-column
				prop="date"
				label="日期"
				sortable="custom"
				width="180"
				column-key="date"
				:filter-multiple="false"
				:filters="[
					{ text: '2016-05-01', value: '2016-05-01' },
					{ text: '2016-05-02', value: '2016-05-02' },
					{ text: '2016-05-03', value: '2016-05-03' },
					{ text: '2016-05-04', value: '2016-05-04' },
				]"
			>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
			<el-table-column prop="address" label="地址" :formatter="formatter"> </el-table-column>
			<el-table-column
				prop="tag"
				label="标签"
				width="100"
				:filters="[
					{ text: '家', value: '家' },
					{ text: '公司', value: '公司' },
				]"
				column-key="tag"
				filter-placement="bottom"
			>
				<template slot-scope="scope">
					<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [
				{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					tag: '家',
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄',
					tag: '公司',
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄',
					tag: '家',
				},
				{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄',
					tag: '公司',
				},
			],
		};
	},
	methods: {
		clearFilter() {
			this.$refs.filterTable.sort('date', 'descending');
			this.$refs.filterTable.clearFilter();
		},
		formatter(row) {
			return row.address;
		},

		onSortChange(obj) {
			console.log(obj.column);
		},

		onFilterChange(filterProps) {
			console.log(filterProps);
		},
		selectableHandle(row, index) {
			return index >= 1;
		},
	},
};
</script>

<style lang="scss" scoped></style>
